<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="快速登录" title-color="#333" title-size="36">
		</u-navbar>
		<view class="contentView">
			<image class="logoIcon" :src="logoUrl"></image>
			<view class="loginView" @click="onAuthorize()">一键快速登录</view>
			<view class="cancelView" @click="onCancel()">取消</view>
			<view class="checkView" @click="onCheck()">
				<image class="checkIcon" src="/static/icon/selected.png" v-if="isCheck"></image>
				<image class="checkIcon" src="/static/icon/unselected2.png" v-else></image>
				<view class="checkText">我已阅读并同意<text @click.stop="onPolicy(2)">《用户协议》</text>和<text
						@click.stop="onPolicy(3)">《隐私协议》</text></view>
			</view>
		</view>
		<u-popup ref="dialog" mode="bottom" border-radius="10" :safe-area-inset-bottom="true" :closeable="true">
			<view class="popupView">
				<text class="popupTitle">获取授权</text>
				<text class="popupText">申请获取您的手机号用于注册，</text>
				<text class="popupText" style="flex: 1;">完成后可使用更多功能</text>
				<button class="popupLogin" open-type="getPhoneNumber" @getphonenumber="onGetPhone">获取微信手机号</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		closeload,
		toast, toastC, toastload
	} from '../../utils/common';
	// import {
	// 	getbindPhone,
		
	// } from '@/api/user.js'
	import {
		getLogo,
		loginBtn
	} from '../../api/index.js'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				isCheck: false,
				phoneNumber: '',
				logoUrl: '',
				isLogin: false,
				openid: ''
			}
		},
		onLoad() {
			this.initLogo();
		},
		methods: {
			initLogo() {
				let self = this;
				toastload()
				getLogo().then(res => {
					self.logoUrl = res.data.logo;
					closeload()
				})
				// self.$api.getLogo({}, true).then(res => {
				// 	self.logoUrl = res.data.logo;
				// });
			},
			onCheck() {
				this.isCheck = !this.isCheck;
			},
			onCancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			onPolicy(type) {
				// this.$utils.jump();
				uni.navigateTo({
					url: '/other/webData/webData?type=' + type
				})
			},
			onAuthorize() {
				console.log("登录");
				let that = this;
				if (!this.isCheck) {
					toast('请仔细阅读并同意《用户协议》和《隐私协议》')
					return
				}
				uni.login({
					provider: 'weixin',
					success: function(res) {
						// console.log(98998,res);
						that.wecahtLogin(res.code);
					}
				});
			},
			wecahtLogin(code) {
				let self = this;
				loginBtn({
					code:code,
					uid:uni.getStorageSync("sales_uid")||''
				}).then(res => {
					this.openid = res.data.openid;
					if (res.data.is_register != 0) {
						uni.setStorageSync("access_token", res.data.access_token);
						uni.setStorageSync("token_type", res.data.token_type);
						toastC("登录成功")
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 500)
					} else {
						self.$refs.dialog.open();
					}
				})
			},
			onGetPhone(e) {
				let self = this;
				if (e.detail.code == '') {
					toast('请先授权手机号')
					return
				}
				getbindPhone({
					code: e.detail.code,
					openid: this.openid
				}).then(res => {
					console.log(999, res);
					if (res) {
						uni.setStorageSync("access_token", res.data.access_token);
						uni.setStorageSync("token_type", res.data.token_type);
						self.$refs.dialog.close();
						toast('授权完成')
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 500)
					}

				})
				// self.$user.bindWechatPhone({
				// 	code: e.detail.code,
				// 	openid: this.openid
				// }, true).then(res => {
				// 	if (res) {
				// 		uni.setStorageSync("access_token", res.data.access_token);
				// 		uni.setStorageSync("token_type", res.data.token_type);
				// 		toast('授权完成')
				// 		setTimeout(function() {
				// 			uni.navigateBack({
				// 				delta: 1
				// 			});
				// 		}, 500)
				// 	}
				// });
			}
		}
	}
</script>

<style>
	.contentView {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 50rpx;
		padding-right: 50rpx;
	}
	
	.logoIcon {
		width: 200rpx;
		height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 20px 0px rgba(246, 99, 45, 0.3);
		border-radius: 50%;
		margin: 140rpx 0px;
	}
	
	.loginView {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(180deg, #ff662e, #f6632d);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	
	}
	
	.cancelView {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 40rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #666666;
	}
	
	.checkView {
		width: 100%;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 40rpx;
	}
	
	.checkIcon {
		width: 32rpx;
		height: 32rpx;
	}
	
	.checkText {
		font-size: 26rpx;
		color: #333333;
		margin-left: 10rpx;
	}
	
	.checkText text {
		color: #F6632D;
		font-size: 26rpx;
	}
	
	.popupView {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
	}
	
	.popupTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		padding: 50rpx 0px;
	}
	
	.popupText {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		margin-bottom: 15rpx;
	}
	
	.popupLogin {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(180deg, #ff662e, #f6632d);
		border-radius: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 150rpx;
		margin-bottom: 20rpx;
	}
</style>